<template>
  <div class="content">
    <BreadNav
      :location="location"
      :routers="routers"
    />
    <main>
      <aside>
        <section>
          <i>
            <img
              src="../assets/resume.png"
              alt=""
            />
          </i>
          <h2>罗明宝</h2>
          <p>高级前端开发工程师</p>
          <span>抗压能力强</span>
          <span>组织领导力</span>
          <span>有执行力</span>
          <span>耐心细心</span>
        </section>
        <ul class="resume_con">
          <li class="re_xl">大学本科</li>
          <li class="re_rq">2000年6月21日</li>
          <li class="re_tell">18706064133</li>
          <li class="re_email">1597993292@qq.com</li>
          <li class="re_add">南京市江宁区</li>
        </ul>
        <h3>技能特长</h3>
        <ul class="resume_tec">
          <li>html <span></span></li>
          <li>css <span></span></li>
          <li>javascript <span></span></li>
        </ul>
      </aside>
      <article>
        <h2>教育背景</h2>
        <p>
          <span>武夷学院 / 2018年09月 - 2022年06月</span>
        </p>
        <p>计算机科学与技术 本科 数学与计算机学院 专业排名前10%</p>
        <p>
          荣誉奖项：优秀学生干部（2019-2020）、校二等奖学金（2019-2020）、校三等奖学金（2020-2021）
        </p>
        <h2>专业技能</h2>
        <ul>
          <li>
            熟悉HTML5/CSS3/JavaScript.，掌握ES6以上常用语法，了解TypeScript基本使用;
          </li>
          <li>熟练使Vue全家桶及其UI框架开发业务，了解React基本使用;</li>
          <li>熟悉微信小程序原生及框架Taro，Uniapp开发;</li>
          <li>
            善于使用类库思想解决项目问题，代码编写质量意识（可维护性、拓展性、性能优化等)
          </li>
          <li>了解计算机网络、通信相关基础及常用网络协议TCP/IP、HTTP等;</li>
          <li>
            掌握移动端Web开发，了解常用屏幕适配方案、PC移动端浏览器兼容性;
          </li>
          <li>
            了解NodeJs并能够搭建服务器应用，掌握代码管理工具Git及前端工程化构建工具webpack;
          </li>
          <li>了解Electron桌面应用技术</li>
        </ul>
        <h2>实习经历</h2>
        <p>
          <strong>web前端实习生</strong>
        </p>
        <p>
          <span>上贤软件（福建省武夷山市）有限责任公司 / 2019年11月 -
            2021年06月</span>
        </p>
        <p>
          于2019年11月加入上贤软件工作室（大学生实训室）从事前端开发，组织参与“易货”项目（二手交易平台），获得软件设计
          大赛三等奖，与小组共同开发上贤官网，“给它家”微信小程序，博客后台管理系统，华亨通讯APP等，有开源项目发布于码
          云，前端技术主攻，nodejs等后端语言掌握与应用次之。个人作品集gitee
        </p>
        <h2>项目经历</h2>
        <h4>给它家微信小程序 / 2020年09月 - 至今</h4>
        <ul>
          <li>
            项目概况：一个拥有寻宠/寻主/领养等等一站式解决爱宠人士需求的平台（已上线），具体点击可看，用户数破5000，日
            活300。
          </li>
          <li>
            参与开发：完成社区模块，页面设计，接口交互操作，完成举报中心模块。
          </li>
          <li>
            项目职责:
            参加产品组织的评审会，根据评定的产品需求开发系统的部分功能模块，进行开发以及对测试提出的bug及时修
            复，完成需求上线。
          </li>
          <li>
            技术难点：微信小程序的
            wx.uploadFile方法无法传文件数组，仅支持单文件上传(解决方案：Promise.all上传/递归上传
            （图片使用文件id做唯一识别关联）)
            ，setdata长列表加载性能优化，css3某些动画不兼容。
          </li>
        </ul>
        <h4>华亨通讯移动端APP / 2021年05月 - 至今</h4>
        <ul>
          <li>项目概况：一个连接监狱犯人端和家属端的视频通讯平台，拥有预约视频，视频通话，充值，信息展示查询功能等。</li>
          <li>项目职责：设计家属端的APP原型图，开发流程图，根据产品的需求开发系统的功能模块，完成需求上线。
          </li>
          <li>技术难点：uview无法依次上传form-data格式单个图片文件；websocket轮询监听视频通话状态；支付宝微信充值模块；应用入口页设置为中间过渡加载页，防止进入应用时闪屏；使用腾讯内核X5，解决Android 8.0及以下 WebView崩溃，
            APP闪退问题。
          </li>
          <li>技术选型：uniapp+uview</li>
        </ul>
        <h4>EHR产品项目 / 2022年01月 - 2022年02月</h4>
        <ul>
          <li>项目概况：公司人员招聘为主的用于提高工作效率，方便组织管理，员工自助服务提升。</li>
          <li>用途：全局管控、优化流程、系统整合、降本增效、提升体验、人才在线。</li>
          <li>项目职责：参与需求评审，开发EHR后台管理系统及前台登录认证部分，完成需求发版上线。</li>
          <li>技术选型：vue3+ts+element-plus</li>
        </ul>
        <h4>上贤软件官方网站 / 2020年12月 - 2021年01月</h4>
        <ul>
          <li>项目概况：用于向武院同学们展示我们工作室的一些成员，荣誉，以及活动等的内容管理系统，上线部署于校园内网。</li>
          <li>项目职责：项目前端负责人，负责项目设计，交互，接口封装，模块化组件化开发。</li>
          <li>技术选型：vue+axios+vuex等</li>
        </ul>
        <h2>自我评价</h2>
        <p>
          在本科期间我不仅能够保持成绩在年级前5%，GPA3.5以上，还积极参与学校组织的各项活动和社团活动，在校期间积极参与软件设计大赛、互联网+创新创业比赛、数学建模、校运动会等，我是一个极具领导才能和责任心的人，能够迅速和同学们打成一片。
        </p>
      </article>
    </main>
    <Footer />
  </div>
</template>

<script>
import BreadNav from '@/components/BreadNav.vue'
import Footer from '@/components/Footer.vue'
export default {
  components: {
    BreadNav,
    Footer
  },
  data() {
    return {
      location: '个人简历',
      routers: 'seoyouhua'
    }
  }
}
</script>

<style lang="scss" scoped>
// 宽度大于1201px时
@media screen and (min-width: 1201px) {
  .content {
    width: 1200px;
    margin: 0 auto;
  }
}

// 宽度小于1200px时
@media screen and (max-width: 1200px) {
  .content {
    margin: 0 40px;
  }
}

@media only screen and (max-width: 768px) {
  body .content main aside {
    width: 100%;
  }
  // body .content main article {
  //   width: 90%;
  //   width: -moz-calc(100%-80px);
  //   width: -webkit-calc(100%-80px);
  //   width: calc(100%-80px);
  // }
  body .content main {
    flex-wrap: wrap;
  }
}
@media only screen and (max-width: 480px) {
  .content {
    margin: 0 15px;
  }
  body .content main article {
    padding: 30px 12px 100px;
  }
}

.content {
  main {
    display: flex;
    margin-bottom: 20px;
    aside {
      width: 340px;
      background: #f3f8fb;
      section {
        text-align: center;
        margin-bottom: 30px;
        i {
          width: 160px;
          height: 160px;
          margin: 50px auto 20px;
          border-radius: 100%;
          overflow: hidden;
          display: block;
          img {
            width: 100%;
            min-height: 100%;
          }
        }
        p {
          line-height: 30px;
          margin: 10px 0 30px;
        }
        span {
          padding: 6px 10px;
          background: #012684;
          color: #fff;
          margin: 10px;
          display: inline-block;
          width: 30%;
          border-radius: 5px;
        }
      }
      .resume_con {
        line-height: 36px;
        margin: 0 20px 0 60px;
        li {
          padding-left: 45px;
        }
        .re_xl {
          background: url(../assets/re_xl.png) no-repeat left center;
          background-size: 32px;
        }
        .re_rq {
          background: url(../assets/re_rq.png) no-repeat left center;
          background-size: 32px;
        }
        .re_tell {
          background: url(../assets/re_dh.png) no-repeat left center;
          background-size: 32px;
        }
        .re_email {
          background: url(../assets/re_email.png) no-repeat left center;
          background-size: 32px;
        }
        .re_add {
          background: url(../assets/re_add.png) no-repeat left top 5px;
          background-size: 32px;
        }
      }
      h3 {
        text-align: center;
        margin: 30px auto;
        font-size: 20px;
      }
      .resume_tec {
        margin: 0 40px 100px;
        li {
          overflow: hidden;
          line-height: 36px;
          position: relative;
          span {
            width: 70%;
            float: right;
            background: #ccc;
            height: 15px;
            display: inline-block;
            margin-top: 10px;
            position: relative;
          }
        }
        li span:before {
          position: absolute;
          content: '';
          background: #012684;
          background: linear-gradient(
            90deg,
            #012684 0%,
            #026b70 100%
          ) !important;
          left: 0;
          top: 0;
          width: 50%;
          height: 15px;
        }
        li:nth-child(1) span:before {
          width: 80%;
        }
        li:nth-child(2) span:before {
          width: 90%;
        }
        li:nth-child(3) span:before {
          width: 100%;
        }
      }
    }
    article {
      // width: 860px;
      background: #ffffff;
      padding: 30px 40px 100px;
      font-size: 16px;
      line-height: 32px;
      word-break: break-all;
      h2,
      h3 {
        position: relative;
        font-size: 20px;
        margin: 30px 0;
        line-height: 36px;
      }
      p {
        margin: 10px 0;
      }
      ul {
        margin: 20px 0 20px 20px;
        li {
          list-style-type: disc;
          margin-top: 3px;
          line-height: 30px;
        }
      }
    }
  }
}
</style>
